
<template>
  <div class="api-mamager">
    <el-row>
      <el-col :span="5">
        <group @getApi="getApi"></group>
      </el-col>

      <el-col :span="19">
        <div class="api-content">
          <h3 class="api-title">接口数 ( {{apiList.params.count}} ) 个</h3>

          <div style="margin-top: 5px; margin-bottom: 5px;">
            <el-input v-model="apiList.params.keyword" placeholder="可按接口名、路径、编写人、版本号搜索" style="width:350px">
              <i class="el-icon-search el-input__icon" slot="suffix"></i>
            </el-input>

            <el-button size='small' type="primary" class="add-interface" @click="clickAddApi()"> <i class="el-icon-plus"></i>添加接口</el-button>
            <addApi ref="addApi" @getApi="getApi"></addApi>
          </div>

          <el-table :data="apiList.list" border style="width: 100%" stripe :header-cell-style="headerCellClass">
            <el-table-column sortable fixed prop="id" label="编号" width="80">
            </el-table-column>
            <el-table-column sortable prop="name" label="接口" width="150">
            </el-table-column>
            <el-table-column sortable prop="path" label="路径" width="300">
              <template slot-scope="scope">
                <el-tag type="success">{{scope.row.method}}</el-tag>
                <span>{{scope.row.path}}</span>
              </template>
            </el-table-column>
            <el-table-column prop="groupName" label="分组" width="120">
            </el-table-column>
            <el-table-column sortable prop="status" label="状态" width="120">
              <template slot-scope="scope">
                <el-tag v-if="scope.row.status == 0">已发布</el-tag>
                <el-tag v-else-if="scope.row.status == 1">设计中</el-tag>
                <el-tag v-else-if="scope.row.status == 2">开发</el-tag>
                <el-tag v-else-if="scope.row.status == 3">对接</el-tag>
                <el-tag v-else-if="scope.row.status == 4">测试</el-tag>
                <el-tag v-else-if="scope.row.status == 5">完成</el-tag>
                <el-tag v-else-if="scope.row.status == 6">异常</el-tag>
                <el-tag v-else-if="scope.row.status == 7">维护</el-tag>
                <el-tag v-else-if="scope.row.status == 8">废弃</el-tag>

              </template>
            </el-table-column>
            <el-table-column sortable prop="createUserName" label="添加人" width="120">
            </el-table-column>
            <el-table-column sortable prop="createTime" label="添加时间" width="180">
            </el-table-column>
            <el-table-column sortable prop="updateTime" label="更新时间" width="180">
            </el-table-column>
            <el-table-column prop="zip" label="操作" width="120" fixed="right">
              <template slot-scope="scope">
                <router-link :to="{path:'/AiTestingInterface-project/api/?api_id=' +scope.row.id , params:{api_id: scope.row.id } }">
                  <el-button type="text" size=small>编辑</el-button>
                </router-link>

                <el-button type="text" style="color:red" size=small @click="deleteApi(scope.row.id)">删除</el-button>
              </template>

            </el-table-column>
          </el-table>

          <div style="margin-top:50px">
            <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="apiList.params.currentPage" :page-sizes="[20, 30, 50, 100,200]" @prev-click="prevClickChange" @next-click="nextClickChange" :page-size="apiList.params.pageSize" layout="total, sizes, prev, pager, next, jumper" :total="apiList.params.count">
            </el-pagination>
          </div>

        </div>

      </el-col>
    </el-row>

  </div>
</template>

<script>
import group from '../apiGroup/group.vue'
import addApi from './components/addApi.vue'


export default {
  data () {
    return {
      projectId: null,

      apiList: {
        list: [],
        params: {
          groupId: null,
          keyword: '',
          currentPage: 1,
          pageSize: 20,
          count: 0,
          pageIndex: 1,
        }

      },

      headerCellClass: {
        'background-color': 'rgb(242, 242, 242)',
        'font-weight': 'bold',
        'color': 'rgb(39, 38, 38)',
        'height': '39px',
      },
    }
  },

  methods: {

    //点击添加接口按钮
    clickAddApi () {
      this.$refs.addApi.dialogVisible = true
    },

    //获取接口
    getApi (requestType, projectId, groupId, interfaceId, keyword, pageIndex, pageSize) {
      if (requestType == 'son') {
      }

      projectId = projectId || this.projectId
      interfaceId = interfaceId || ''
      keyword = keyword || this.apiList.params.keyword
      groupId = groupId || this.apiList.params.groupId
      pageIndex = pageIndex || this.apiList.params.pageIndex
      pageSize = pageSize || this.apiList.params.pageSize

      this.apiList.list = []
      this.$http({
        url: this.$http.adornUrl('/aitesting/api/getByCondition'),
        method: 'get',
        params: {
          projectId: projectId,
          groupId: groupId,
          interfaceId: interfaceId,
          keyword: keyword,
          pageIndex: pageIndex,
          pageSize: pageSize,
        }
      }).then(({ data }) => {
        if (data.code == 0) {
          this.apiList.list = data.page.apis
          this.apiList.params.count = data.page.count
        } else {
          this.$message({
            message: data.msg,
            type: 'warning'
          });
        }
      })
    },


    //删除接口
    deleteApi (id) {
      this.$confirm('此操作将永久删除该接口, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.$http({
          url: this.$http.adornUrl('/aitesting/api/delete'),
          method: 'delete',
          params: {
            apiId: id,
          }
        }).then(({ data }) => {
          if (data.code == 0) {
            this.$message({
              type: 'success',
              message: '删除成功!'
            });
            this.getApi('', this.projectId)
          } else {
            this.$message({
              message: data.msg,
              type: 'warning'
            });
          }
        })
      }).catch(() => {
      });
    },




    //页大小更变
    handleSizeChange (val) {
      console.log(val)
      this.apiList.params.pageSize = val
      this.getApi()
    },

    //页的变更
    handleCurrentChange (val) {
      console.log(val)
      this.apiList.params.currentPage = val
      this.apiList.params.pageIndex = val
      this.getApi()

    },

  },

  watch: {
    //关键字搜索
    'apiList.params.keyword' (val, oldVal) {
      //普通的watch监听
      this.getApi('', this.projectId);
    },

  },

  activated () {
    this.projectId = this.$store.state.api.projectId
    if (this.projectId == 0) {
      this.$router.push("/AiTestingInterface-project/projectManager")
      this.$message({ message: "请先选择项目！", type: 'warning' })
    }
  },
  components: {
    group,
    addApi
  },

  mounted () {
    this.projectId = this.$store.state.api.projectId
    this.getApi()

  }
}
</script>

<style scoped>
.api-content {
  margin-left: 4px;
}

.api-mamager .api-title {
  clear: both;
  font-weight: 400;
  border-left: 3px solid #39b3a3;
  padding-left: 8px;
  display: inline-block;
  margin: 0;
  padding-top: 6px;
  padding-bottom: 6px;
}

.api-mamager .add-interface {
  float: right;
  margin-right: 4px;
  text-align: right;
}

.api-manager >>> .el-table th {
  padding: 3px 0;
}
</style>

